<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录，请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg"  width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">活动尚未开始
        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="initVerifyCodeImg()" style="display: none">
            <input id="verifyCode" style="display: none">
            <button class="btn btn-primary btn-block" type="button" id="buyButton" disabled onclick="doSeckill()">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script>
    var user;
    var seckillId;
    var uuid;

    $(function () {
        //初始化当前登录用户
        initUser();
        //获取地址栏中秒杀商品的id
        seckillId = getQueryString("seckillId");
        //初始化当前的秒杀商品
        initSeckillGoods();
    });

    function initUser() {
        $.ajax({
            url: "http://localhost:9000/member/api/tokens",
            type: "GET",
            xhrFields: {withCredentials: true},
            success: function (res) {
                renderUser(res.data);
            },
            error: function (res) {
                if(res.responseJSON){
                    layer.msg(res.responseJSON.msg);
                }
            }
        });

    }


    function renderUser(data) {
        var userTip = $("#userTip");
        if(data){
            user = data;
            uuid = getUuid(user.id);
            userTip.hide()
        }else{
            userTip.show();
        }
    }


    function initSeckillGoods(){
        $.ajax({
            url: "http://localhost:9000/seckill/api/seckillGoods/"+seckillId,
            type: "GET",
            xhrFields: {withCredentials: true},
            success: function (res) {
                renderSeckillGoods(res.data);
            },
            error: function (res) {
                if(res.responseJSON){
                    layer.msg(res.responseJSON.msg);
                }
            }
        });
    }


    var timer;
    function renderSeckillGoods(data) {
        $("#goodName").html(data.goodName);
        $("#goodImg").prop("src",data.goodImg);
        $("#startDate").html(data.startDate);
        $("#goodPrice").html(data.goodPrice);
        $("#seckillPrice").html(data.seckillPrice);
        $("#stockCount").html(data.stockCount);
        //根据秒杀时间对用户做出相应的提示,以及控制是否能点击
        renderSeckillTime(data.startDate,data.endDate);

        //设置定时器,反复调用renderSeckillTime
        timer = setInterval(function () {
            renderSeckillTime(data.startDate,data.endDate);
        },1000);
    }

    function renderSeckillTime(sDate,eDate) {
        //sDate,eDate为字符串类型
        var startDate = new Date(sDate);
        var endDate = new Date(eDate);
        var now = new Date();
        //此时将开始时间/结束时间与当前时间进行对比

        //now<startDate 当前时间<开始时间 说明秒杀活动未开始,秒杀按钮禁用
        //startDate=<now<endDate 开始时间<当前时间<结束时间 说明秒杀活动正在进行,秒杀按钮启用
        //now>=endDate 当前时间>结束时间 说明秒杀活动已结束,秒杀按钮禁用

        //如果>0,说明秒杀活动未开始;如果<=0,说明秒杀活动正在进行
        var remainStartSeconds = parseInt((startDate.getTime() - now.getTime()) / 1000);
        //如果>0,说明秒杀活动尚未结束,如果<=0,说明秒杀活动已结束
        var remainEndSeconds = parseInt((endDate.getTime() - now.getTime()) / 1000);

        if(remainStartSeconds > 0){
            // 向用户提示活动尚未开始,秒杀按钮禁用
            $("#seckillTip").html("秒杀活动未开始,剩余: "+remainStartSeconds+"秒");
            $("#buyButton").prop("disabled",true);
        }else{
            if(remainEndSeconds>0){
                // 向用户提示活动正在进行,秒杀按钮启用
                $("#seckillTip").html("秒杀活动正在进行");
                $("#buyButton").prop("disabled",false);
            }else{
                // 向用户提示活动已结束,秒杀按钮禁用
                $("#seckillTip").html("秒杀活动已结束");
                $("#buyButton").prop("disabled",true);
                clearInterval(timer);
            }
        }
    }

    function doSeckill() {

        //判断当前用户是否登录
        if(!user){
            layer.msg("请先登录,再进行秒杀操作");
            return;
        }

        //向后端发起请求,进行秒杀
        $.ajax({
            url: "http://localhost:9000/seckill/api/orders/seckill",
            type: "POST",
            xhrFields: {withCredentials: true},
            data:{seckillId:seckillId,uuid:uuid},
            success: function (res) {
                //秒杀成功后,跳转到订单详情页面
                if(res.code === 0){
                    layer.msg(res.data);
                    createScoket(uuid);
                }else{
                    layer.msg(res.msg);
                }
            },
            error: function (res) {
                if(res.responseJSON){
                    layer.msg(res.responseJSON.msg);
                }
            }
        });
    }

</script>
</body>
</html>